<script setup>
// ref：让数据具备响应式,需要加 .value
// reactive：让引用类型的数据具备响应式，不需要加 .value
// readonly: 只读的数据，当值改变的时候会有一个提示
// computed: 计算属性
// 
import { ref, reactive, readonly, computed, watch, watchEffect, onWatcherCleanup } from 'vue'

const price = ref(100)
// const name = ref('张三')
const count = ref(0)

// 侦听器在组合式监听多个值，当做一个数组进行监听
watch(price, (newVal, currVal) => {
    // console.log(newVal, currVal);

    let time = setInterval(() => {
        count.value++
    }, 1000);

    // 清除副作用，在里面可以清除掉异步操作
    // 会在下一次执行侦听器之前执行
    onWatcherCleanup(() => {
        // 终止过期请求
        clearInterval(time)
    })
})

</script>

<template>
    <h1>组合式 API</h1>
    <h2>
        {{ price }} ------- {{ count }}
    </h2>
    <button @click="price++">修改</button>

</template>
